<template>
<div class="row">
  <my-tabs :tabs="tabs"></my-tabs>
  <router-view></router-view>
</div>
</template>

<script>
import _ from 'lodash'
import {Tabs} from '../configs/monitorSystem.js'
import locales from '../locales/monitorSystem.js'
import {
  doLoadIpcams,
  doLoadVendors,
  doLoadMtSrcs
} from 'share/server/vuex/actions/streamsrc.js'
import {
  doLoadMediaTopoDevs,
  doLoadMonitors
} from 'share/server/vuex/actions/media.js'

export default {
  locales,
  vuex: {
    getters: {
      platform: (state) => state.system.platform
    },
    actions: {
      doLoadIpcams,
      doLoadVendors,
      doLoadMtSrcs,
      doLoadMediaTopoDevs,
      doLoadMonitors      
    }
  },
  data () {
    return {
      tabs: new Tabs(this)
    }
  },
  ready () {
    this.doLoadIpcams()
    this.doLoadVendors()
    this.doLoadMtSrcs({init: true})
    this.doLoadMediaTopoDevs({init: true})
    this.doLoadMonitors()
  }
}
</script>

<style>
</style>